<template>
  <section style="margin:20px;">
    <div style="text-align: center;">
      <el-button type="primary"
        style="margin-bottom:10px;"
        icon="el-icon-plus"
        @click="creatService">创建服务</el-button>
    </div>
    <!--列表-->
    <el-tabs type="border-card">
      <el-tab-pane label="已发布服务">
        <Pubished />
      </el-tab-pane>
      <el-tab-pane label="已申请服务">
        <AppliedSv />
      </el-tab-pane>
      <el-tab-pane label="全部服务">
        <AllTable />
      </el-tab-pane>
    </el-tabs>
    <!--创建服务界面-->
    <el-dialog title="创建服务"
      :visible.sync="addsVisible"
      :close-on-click-modal="false"
      class="add-service">
      <addService :sendApiCode="sendApiCode" />
    </el-dialog>
  </section>
</template>

<script>
import AllTable from "./allTable";
import addService from "./publishService";
import Pubished from "./publishedService";
import AppliedSv from "./appliedSv";
export default {
  components: {
    AllTable,
    addService,
    Pubished,
    AppliedSv
  },
  data() {
    return {
      allSvTable: [],
      addsVisible: false,
      sendApiCode: ""
    };
  },
  methods: {
    creatService() {
      this.addsVisible = true;
      this.sendApiCode = "";
    }
  },
  mounted() {
    // this.getAllServiceInfo();
  }
};
</script>

<style>
.add-service .el-dialog {
  width: 80%;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>